<script setup lang="ts">
// 引入标题
import IndexTitle from '@/components/IndexTitle.vue';
// 引入请求方法
import { getDistribution, getCityCode } from "@/api"
// 引入图表组件
import Charts from '@/components/charts.vue';
// 引入vue
import { reactive, ref } from "vue"
// 定义tab切换数据
const tabList = ref([
    {
        title: "设计",
        img: "/src/assets/icon/2020.jpg",
        num: 1,
        year: 2020
    }, {
        title: "开发",
        img: "/src/assets/icon/2022.jpg",
        num: 2,
        year: 2022
    }, {
        title: "元宇宙",
        img: "/src/assets/icon/2021.jpg",
        num: 3,
        year: 2023
    }
])



const config = ref({
    data: <any>[

    ],
    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
    // unit: '万元',
    labelNum: 0,
    showValue: true,
})


// 点击切换数据
const handleTab = (params: any) => {
    config.value.data = []

    getCityCode().then((res) => {
        console.log(99999, res.data);

    })
    getDistribution({
        expertiseId: params.num,
        gradYear: params.year
    }).then(res => {
        console.log(res.data.data, 5555);
        const result = res.data.data.result;
        result.forEach((item: any, index: number) => {
            (config.value.data).push({
                name: item.workCity,
                value: item.total
            })
        })
    })
}



</script>

<template>
    <!-- 右上 - 毕业上流向城市 -->
    <div class="right-top_container">
        <!-- 标题 -->
        <index-title title="毕业生流向城市"></index-title>

        <!-- 主要内容 -->
        <div class="right-content">
            <!-- tab切换 -->
            <div class="tab">
                <div class="tabBox" @click="handleTab(item)" v-for="(item, index) 
                
                in tabList " :key="index">
                    <img :src="item.img" alt="">
                    <p>{{ item.title }}</p>
                </div>
            </div>
            <!-- 图表 -->
            <div class="maychart">

                <dv-capsule-chart :config="config" style="width:100%;height:100%" />


                <!-- <Charts></Charts> -->
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-top_container {
    width: 100%;
    height: 55%;

    .right-content {
        width: 100%;
        height: calc(100% - 40px);
        background: #092c75;

        .tab {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;


            .tabBox {
                background: #ad00ff;
                width: 30%;
                cursor: pointer;
                text-align: center;
                line-height: 40px;
                font-size: 14px;
                color: #fff;
                display: flex;
                justify-content: space-around;
                align-items: center;

                p {
                    margin: 0;
                    padding: 0;
                }

                img {
                    width: 25px;
                    height: 25px;
                    vertical-align: middle;
                }
            }
        }

        .maychart {
            width: 100%;
            height: calc(100% - 50px);
            padding-top: 10px;
            box-sizing: border-box;
        }
    }
}
</style>